<template>
    <div>
        <template v-for="(value, key) in valueObj">
            <el-form-item v-if="!isObject(value)" :key="key" :label="labelPrefix + key" :prop="propPrefix + key">
                <div class="dynamic-form-item-row">
                    <my-upload-img v-if="isImageField(key, value)" 
                        :ref="`upload-${propPrefix}${key}`" 
                        url="/articles/cover/photo" 
                        @upload-success="(url) => handleImageUpload(key, url)"
                        :imageUrl="value" />
                    <el-input v-else v-model="valueObj[key]" />
                    <el-button 
                        type="danger" 
                        icon="el-icon-delete" 
                        size="mini" 
                        circle
                        class="delete-field-btn"
                        @click="deleteField(key)">
                    </el-button>
                </div>
            </el-form-item>
            <div v-else :key="'obj-'+key" class="nested-object">
                <div class="nested-object-header">
                    <span>{{ labelPrefix + key }}</span>
                    <el-button 
                        type="danger" 
                        icon="el-icon-delete" 
                        size="mini" 
                        circle
                        @click="deleteField(key)">
                    </el-button>
                </div>
                <dynamic-form-item :value-obj="value" :label-prefix="labelPrefix + key + '.'"
                    :prop-prefix="propPrefix + key + '.'" @field-deleted="onFieldDeleted" />
            </div>
        </template>
    </div>
</template>

<script>
export default {
    name: 'DynamicFormItem',
    props: {
        valueObj: { type: Object, required: true },
        labelPrefix: { type: String, default: '' },
        propPrefix: { type: String, default: '' }
    },
    methods: {
        isObject(val) {
            return val && typeof val === 'object' && !Array.isArray(val);
        },
        isImageField(key, value) {
            // Check if the field name suggests an image or if the value is an image URL
            const imageKeywords = ['avatar', 'image', 'photo', 'picture', 'logo', 'cover', 'banner', 'thumbnail', 'icon'];
            const isImageUrl = typeof value === 'string' && 
                (value.startsWith('http') || value.startsWith('/')) && 
                /\.(jpg|jpeg|png|gif|webp|svg)$/i.test(value);
            
            return imageKeywords.some(keyword => key.toLowerCase().includes(keyword)) || isImageUrl;
        },
        handleImageUpload(key, url) {
            this.$set(this.valueObj, key, url.data || url);
            this.$emit('field-updated');
        },
        deleteField(key) {
            this.$confirm(`确定要删除字段 "${key}" 吗?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$delete(this.valueObj, key);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                // 通知父组件字段已删除
                this.$emit('field-deleted');
            }).catch(() => {});
        },
        onFieldDeleted() {
            // 向上传递事件
            this.$emit('field-deleted');
        }
    }
}
</script>

<style scoped>
.dynamic-form-item-row {
    display: flex;
    align-items: center;
}

.delete-field-btn {
    margin-left: 10px;
}

.nested-object {
    margin: 10px 0;
    padding: 10px;
    border: 1px dashed #dcdfe6;
    border-radius: 4px;
    background-color: #f8f8f8;
}

.nested-object-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ebeef5;
    font-weight: bold;
}
</style>